<template>
  <div>
    <h1>HOME</h1>
    <div>
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toGame">游戏</button>
    </div>
    <div>
    <button @click="toNewsReplace">新闻Replace</button>
    <button @click="toMusicReplace">音乐Replace</button>
    <button @click="toGameReplace">游戏Replace</button>
    </div>
    <div>
    <button @click="$router.go(-2)">回退2</button>
    <button @click="$router.back()">后退1</button>
    <button @click="$router.forward()">前进1</button>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:"Home",
    /* 
    //编程式路由导航中重复导航抛出错误的处理方式
      1. 因为push或者replace方法只书写第一个参数location的时候,则会返回promise实例,我们直接使用catch(()=>{})处理即可
      2. push或者replace可以接受第二个和第三个参数,都是回调函数,用来处理成功和失败
  
  */
    methods: {
        toNews(){
            // 处理方式2
         const result = this.$router.push("/home/news",null,()=>{})
         console.log(result,this);
        //  处理方式1
        // result.catch(()=>{})
        },
        toMusic(){
             //push方法的对象类型参数,对象中书写path属性代表完整地址
            this.$router.push(
                {
                    path:"/home/music"
                }
            )
        },
        toGame(){
            //push方法的对象类型参数,对象中书写name属性代表某个路由的名字
            this.$router.push(
                {
                    name:"Game"
                }
            )
        },
        toNewsReplace() {
            this.$router.replace("/home/news");
        },
        toMusicReplace() {
            this.$router.replace("/home/music");
        },
            toGameReplace() {
            this.$router.replace("/home/game");
    },
    },

}
/*
  如何判断then和catch的返回值????
    1. 先判断是否穿透,穿透的意思就是当前then或者catch返回调用当前方法的promise实例,如果当前方法中没有处理该promise实例的回调函数,则默认直接穿透
    2. 如果没有穿透,说明当前方法中有处理当前promise的回调函数,
      - 不管是catch还是then都是默认返回成功promise
      - 如果catch或者then中的回调函数中有没有处理的异常抛出或者返回一个失败的promise实例,则then和catch返回失败的promise实例

*/
</script>

<style>

</style>